<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import mapData from '../../../json/map/china.json'// 引入中国地图矢量数据
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // 不同城市颜色不同
            // 1.显示基本的中国地图
            // ⒉.城市的空气质量数据设置给series
            // 3.将series下的数据和geo关联起来
            // 4.结合visualMap配合使用
            var airData = [
                { name: '北京', value: 39.92 },
                { name: '天津', value: 39.13 },
                { name: '上海', value: 31.22 },
                { name: '重庆', value: 66 },
                { name: '河北', value: 147 },
                { name: '河南', value: 113 },
                { name: '云南', value: 25.04 },
                { name: '辽宁', value: 50 },
                { name: '黑龙江', value: 114 },
                { name: '湖南', value: 175 },
                { name: '安徽', value: 117 },
                { name: '山东', value: 92 },
                { name: '新疆', value: 84 },
                { name: '江苏', value: 67 },
                { name: '浙江', value: 84 },
                { name: '江西', value: 96 },
                { name: '湖北', value: 273 },
                { name: '广西', value: 59 },
                { name: '甘肃', value: 99 },
                { name: '山西', value: 39 },
                { name: '内蒙古', value: 58 },
                { name: '陕西', value: 61 },
                { name: '吉林', value: 51 },
                { name: '福建', value: 29 },
                { name: '贵州', value: 71 },
                { name: '广东', value: 38 },
                { name: '青海', value: 57 },
                { name: '西藏', value: 24 },
                { name: '四川', value: 58 },
                { name: '宁夏', value: 52 },
                { name: '海南', value: 54 },
                { name: '台湾', value: 88 },
                { name: '香港', value: 66 },
                { name: '澳门', value: 77 },
                { name: '南海诸岛', value: 55 }
            ]
            var scatterData = [
                {
                    value: [117.283042, 31.86119]
                }
            ]
            let myEchart = echarts.init(this.$refs.main);
            echarts.registerMap('chinaMap', mapData) // 先注册再option的geo
            var option = {
                geo: {
                    type: 'map',// 类型
                    map: 'chinaMap',// 需要和registerMap的第一个参数保持一致
                    roam: true,//设置地图是否可以缩放和拖动
                    label: {
                        show: true,//展示标签

                    }
                },
                series: [{// 城市的空气质量数据设置给series
                    data: airData,
                    geoIndex: 0,// 将series下的数据和geo关联起来
                    type: 'map'
                },
                // 地图和散点图结合
                // 1.给series下增加新的对象
                // 2.准备好散点数据,设置给新对象的data
                // 3.配置新对象的type
                // type:effectScatter
                // 4.让散点图使用地图坐标系统
                // coordinateSystem: 'geo',
                // 5.让涟漪的效果更加明显
                // rippleEffect: {
                // scale: 10
                // }
                {
                    data: scatterData,
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        scale: 10
                    }
                }


                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {// 设置过渡颜色
                        color: ['white', 'red']
                    },
                    calculable: true,// 出现筛选滑块
                }

            }

            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
        console.log(mapData);
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

